<template>
    <div class="commitPage-container">
        <div class="header">
            <div>
                <div class="left" @click="goback">
                    <i></i>
                </div>
            </div>
            <!-- <h4>大件会</h4> -->
            <div class="logo">
                平价
            </div>
        </div>
        <div class="body">
            <div class="pro clearfix">
                <div class="fl">
                    <img src="../../../assets/images/myOrder/shangpinru.png" alt="">
                </div>
                <div class="fr">
                    <ul>
                        <li>2017年10月28日『武汉业主采购团』建材专场</li>
                        <li>冠珠瓷砖</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="busiCommit">
            <h4>- 商家评价 -</h4>
            <div class="face">
                <i></i>
                <i></i>
                <i></i>
            </div>
            <div class="commitbtn">
                <mt-button size="normal" type="default" class="combtn">比较满意</mt-button>
                <mt-button size="normal" type="default" class="combtn">客服服务不错</mt-button>
                <mt-button size="normal" type="default" class="combtn">很不错</mt-button>
                <mt-button size="normal" type="default" class="combtn">节省好多钱</mt-button>
                <mt-button size="normal" type="default" class="combtn">非常满意</mt-button>
            </div>
            <div class="textarea">
            <textarea style="resize: none">
                aaaaaa
                aaaaaa
                aaaaaa
                aaaaaa
                aaaaaa
            </textarea>
            </div>
        </div>  
        <div class="busiCommit">
            <h4>- 团长评价 -</h4>
            <div class="face">
                <i></i>
                <i></i>
                <i></i>
            </div>
            <div class="commitbtn">
                <mt-button size="normal" type="default" class="combtn">非常满意</mt-button>
                <mt-button size="normal" type="default" class="combtn">客服服务不错</mt-button>
                <mt-button size="normal" type="default" class="combtn">很不错</mt-button>
                <mt-button size="normal" type="default" class="combtn">节省好多钱</mt-button>
            </div>
            <div class="textarea">
            <textarea style="resize: none">
                aaaaaa
                aaaaaa
                aaaaaa
                aaaaaa
                aaaaaa
            </textarea>
            </div>
        </div>  
        <div class="foot">
        <router-link to="/vip/order/commitPage">
        <mt-button size="normal" type="danger" class="combtn">提交评价</mt-button>
        </router-link>
    </div>
    </div>
</template>
<script>
export default {
  methods: {
    goback() {
      this.$router.goBack()
    }
  }
}
</script>
<style scoped lang="less">
.header {
  color: #000;
  background-color: #fff;
  .logo {
    a {
      display: inline-block;
      width: 131/37.5rem;
      height: 42/37.5rem;
      margin-top: 18/37.5rem;
    }
  }
  .left {
    position: absolute;
    left: 32/37.5rem;
    top: 35/37.5rem;
    height: 32/37.5rem;
    line-height: 32/37.5rem;
    a {
      font-size: 32/40rem;
    }
    i {
      display: inline-block;
      width: 22/37.5rem;
      height: 30/37.5rem;
      background: url(../../../assets/images/index/gengduo@2x.png) no-repeat;
      background-size: contain;
      transform: rotate(180deg);
    }
  }
}

.body {
  padding-top: 18/37.5rem;
  padding: 0 31/37.5rem;
  text-align: right;
  background-color: #fff;
  margin-top: 26/37.5rem;
  padding-bottom: 24/37.5rem;
  .pro {
    .fl {
      width: 200/37.5rem;
      height: 200/37.5rem;
      margin-top: 13/37.5rem;
    }
    .fr {
      width: 451/37.5rem;
      text-align: left;
      li:nth-of-type(1) {
        font-size: 30/37.5rem;
        line-height: 56/37.5rem;
        color: #333;
      }
      li:nth-of-type(2) {
        font-size: 28/37.5rem;
        line-height: 56/37.5rem;
        color: #555;
      }
      li:nth-of-type(3) {
        font-size: 24/37.5rem;
        text-align: right;
        span {
          color: red;
          font-size: 26/37.5rem;
        }
      }
    }
  }
  .mint-button {
    width: 170/37.5rem;
    height: 68/37.5rem;
    font-size: 28/37.5rem;
    margin-top: 57/37.5rem;
    margin-bottom: 32/37.5rem;
  }
  .hasPayed {
    padding: 21/37.5rem 0 !important;
    text-align: left;
    font-size: 24/37.5rem;
    padding: 0;
    color: #888;
    border-bottom: 0;
    margin-top: 24/37.5rem;
    width: 100%;
    position: relative;
    line-height: 50/37.5rem;
    height: auto;
    .line {
      width: 104%;
      height: 20px/37.5rem;
      background-color: #eee;
      position: absolute;
      top: 0;
      right: -32/37.5rem;
    }
  }
  .total {
    text-align: right;
  }
}
.busiCommit {
  background-color: #fff;
  margin-top: 26/37.5rem;
  padding-left: 32/37.5rem;
  box-sizing: border-box;
  h4 {
    padding-top: 31/37.5rem;
    font-size: 32/37.5rem;
    margin-bottom: 39/37.5rem;
  }
  i {
    display: inline-block;
    width: 58/37.5rem;
    height: 58/37.5rem;
    margin-right: 100/37.5rem;
  }
  .face {
    i:nth-of-type(1) {
      background: url(../../../assets/images/index/face.png) no-repeat;
      background-size: cover;
    }
    i:nth-of-type(2) {
      background: url(../../../assets/images/index/face.png) no-repeat;
      background-size: cover;
    }
    i:nth-of-type(3) {
      background: url(../../../assets/images/index/face.png) no-repeat;
      background-size: cover;
      margin-right: 0;
    }
  }
  .commitbtn {
    padding: 10/37.5rem 0;
    // padding-right: 33/37.5rem;
    margin-top: 50/37.5rem;
    background-color: #fff;
    text-align: left;
    .mint-button {
      padding: 0 19/37.5rem;
      // width: 170/37.5rem;
      height: 68/37.5rem;
      font-size: 24/37.5rem;
      background-color: #fff;
      margin-right: 24/37.5rem;
    }
    .mint-button:nth-of-type(4) {
      margin-right: 0;
    }
    .mint-button:nth-of-type(5) {
      margin-top: 24/37.5rem;
    }
  }
  .textarea {
    padding-right: 32/37.5rem;
    textarea {
      width: 100%;
      height: 158/37.5rem;
      background-color: #fafafa;
    }
  }
}
.foot {
  padding: 10/37.5rem 0;
  padding-right: 33/37.5rem;
  margin-top: 26/37.5rem;
  background-color: #fff;
  text-align: right;
  .mint-button {
    width: 170/37.5rem;
    height: 68/37.5rem;
    font-size: 28/37.5rem;
  }
}
.combtn {
  background-color: #d8b78d;
}
</style>